import React, { useState } from 'react';

const SidebarMenuItem = ({ item, onMenuClick }) => {
  const [expanded, setExpanded] = useState(false);
  
  const hasChildren = item.children && item.children.length > 0;
  
  const handleClick = () => {
    if (hasChildren) {
      setExpanded(!expanded);
    } else {
      onMenuClick(item);
    }
  };

  return (
    <li className="menu-item">
      <div 
        className={`menu-item-content ${hasChildren ? 'has-children' : ''}`}
        onClick={handleClick}
      >
        <i className={`icon-${item.icon} menu-icon`}></i>
        <span className="menu-title">{item.title}</span>
        {hasChildren && (
          <i className={`expand-icon ${expanded ? 'expanded' : ''}`}>▼</i>
        )}
      </div>
      
      {hasChildren && expanded && (
        <ul className="submenu">
          {item.children.map(child => (
            <SidebarMenuItem
              key={child.id}
              item={child}
              onMenuClick={onMenuClick}
            />
          ))}
        </ul>
      )}
    </li>
  );
};

export default SidebarMenuItem;
